import { useState } from 'react'
import { View, Text, Input } from '@tarojs/components'
import Taro from '@tarojs/taro'

interface TodoHeaderProps {
  activeTab: 'today' | 'templates' | 'history';
  setActiveTab: (tab: 'today' | 'templates' | 'history') => void;
  currentDate: string;
  setCurrentDate: (date: string) => void;
  showDatePicker: boolean;
  setShowDatePicker: (show: boolean) => void;
  inputValue: string;
  setInputValue: (value: string) => void;
  templateInputValue: string;
  setTemplateInputValue: (value: string) => void;
  addTodo: () => void;
  addTemplate: () => void;
  applyAllTemplates: () => void;
  uniqueDates: string[];
  getCurrentDate: () => string;
}

const TodoHeader: React.FC<TodoHeaderProps> = ({
  activeTab,
  setActiveTab,
  currentDate,
  setCurrentDate,
  showDatePicker,
  setShowDatePicker,
  inputValue,
  setInputValue,
  templateInputValue,
  setTemplateInputValue,
  addTodo,
  addTemplate,
  applyAllTemplates,
  uniqueDates,
  getCurrentDate
}) => {
  
  // 处理输入
  const handleInput = (e) => {
    setInputValue(e.detail.value);
  };

  // 处理模板输入
  const handleTemplateInput = (e) => {
    setTemplateInputValue(e.detail.value);
  };

  // 切换日期
  const changeDate = (date: string) => {
    setCurrentDate(date);
    setShowDatePicker(false);
  };

  // 切换到今天
  const goToToday = () => {
    setCurrentDate(getCurrentDate());
  };

  return (
    <>
      <Text className='todo-title'>待办事项</Text>
      
      <View className='todo-tabs'>
        <Text 
          className={`todo-tab ${activeTab === 'today' ? 'active' : ''}`}
          onClick={() => setActiveTab('today')}
        >
          今日任务
        </Text>
        <Text 
          className={`todo-tab ${activeTab === 'templates' ? 'active' : ''}`}
          onClick={() => setActiveTab('templates')}
        >
          模板
        </Text>
        <Text 
          className={`todo-tab ${activeTab === 'history' ? 'active' : ''}`}
          onClick={() => setActiveTab('history')}
        >
          历史
        </Text>
      </View>

      {activeTab === 'today' && (
        <>
          <View className='todo-date-selector'>
            <Text className='todo-date' onClick={() => setShowDatePicker(!showDatePicker)}>
              {currentDate === getCurrentDate() ? '今天' : currentDate}
            </Text>
            {currentDate !== getCurrentDate() && (
              <Text className='todo-today-btn' onClick={goToToday}>
                回到今天
              </Text>
            )}
          </View>

          {showDatePicker && (
            <View className='todo-date-picker'>
              {uniqueDates.map(date => (
                <Text 
                  key={date} 
                  className={`todo-date-option ${date === currentDate ? 'active' : ''}`}
                  onClick={() => changeDate(date)}
                >
                  {date}
                </Text>
              ))}
            </View>
          )}

          <View className='todo-input-box'>
            <Input
              className='todo-input'
              type='text'
              value={inputValue}
              onInput={handleInput}
              placeholder='请输入任务名称，回车确认'
              onConfirm={addTodo}
            />
          </View>
          
          <View className='todo-actions'>
            <Text className='todo-action-btn' onClick={applyAllTemplates}>
              应用所有模板
            </Text>
          </View>
        </>
      )}

      {activeTab === 'templates' && (
        <View className='todo-input-box'>
          <Input
            className='todo-input'
            type='text'
            value={templateInputValue}
            onInput={handleTemplateInput}
            placeholder='请输入模板名称，回车确认'
            onConfirm={addTemplate}
          />
        </View>
      )}

      {activeTab === 'history' && (
        <Text className='todo-history-title'>历史记录</Text>
      )}
    </>
  );
};

export default TodoHeader; 